<script setup>
import { useGlobalStore } from '@/stores/globalStore'
import TopicListItem from './TopicListItem.vue'
import EmptyExpert from '@/assets/empty-expert.svg'

const props = defineProps({
  postsData: Array,
  noMore: Boolean,
  loading: Boolean,
  withoutEmpty: Boolean,
  isNoTops: Boolean,
  topicExplore: String,//单独区分主题内的，卡片或列表模式
  isEdit: {
    type: Boolean,
    default: false,
  },
})

onMounted(() => {
  console.log(globalStore.viewMode)
})

const globalStore = useGlobalStore()
</script>

<template>
  <div>
    <div class="flex gap-3 flex-col">
      <template v-if="postsData && postsData.length > 0">
        <TopicListItem v-for="item in postsData" :key="item.id" :data="item" :isNoTops="isNoTops" :isEdit="isEdit" />
      </template>
      <div v-else class="flex flex-col items-center justify-center py-16 text-slate-400">
        <img :src="EmptyExpert" class="w-28 mb-4" />
        <div class="text-lg font-semibold">暂无主题</div>
      </div>
    </div>

  </div>
  <div v-if="loading" class="text-center">loading</div>
  <div v-if="noMore" class="text-center">没有更多了</div>
</template>

<style scoped lang="scss"></style>
